<template>
  <div class="container">
    <!-- 搜索 + 批量处理 -->
    <el-row>
      <el-col :span="24" style="text-align:right;" >
        <el-input v-model="query.keyword" placeholder="请输入关键字" size="small" clearable style="width:300px">
          <el-select slot="prepend" v-model="query.keywordName" placeholder="请选择" style="width:120px">
            <el-option label="操作者ID" value="operatorId"/>
            <el-option label="操作者昵称" value="operatorName"/>
            <el-option label="操作对象ID" value="receiverId"/>
            <el-option label="操作页面" value="view"/>
            <el-option label="操作者IP" value="clientIp"/>
          </el-select>
        </el-input>
        <el-select v-model="query.model" size="small">
          <el-option
            v-for="item in modelOptions"
            :key="item.index"
            :label="item.name"
            :value="item.index"/>
        </el-select>
        <el-input v-model="query.content" placeholder="操作内容" size="small" class="width-180" clearable />
        <el-date-picker
          v-model="searchDate"
          :picker-options="pickerOptions"
          type="daterange"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="small"
          @change="dateChange"/>
        <el-button type="primary" icon="el-icon-search" size="small" @click="search">搜索</el-button>
      </el-col>
    </el-row>
    <!-- 列表 -->
    <el-table
      v-loading="listLoading"
      :data="tableData"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      style="width: 100%;margin-top:10px;">
      <el-table-column label="编号" width="60" align="center">
        <template slot-scope="scope">{{ scope.$index+1 }}</template>
      </el-table-column>
      <el-table-column label="ID" align="center" prop="id"/>
      <el-table-column label="操作者ID" align="center" prop="operatorId"/>
      <el-table-column label="操作者昵称" align="center" prop="operatorName"/>
      <el-table-column label="操作页面" align="center" prop="view"/>
      <el-table-column label="操作对象类型" align="center" prop="model"/>
      <el-table-column label="操作对象ID" align="center" prop="receiverId"/>
      <el-table-column label="操作内容" align="center" prop="content"/>
      <el-table-column label="操作者IP" align="center" prop="clientIp"/>
      <el-table-column label="操作时间" align="center" prop="createTime" />
    </el-table>
    <!-- 分页 -->
    <el-row style="text-align:right;">
      <Pagination
        v-show="total>0"
        :total="total"
        :page.sync="query.pageNum"
        :limit.sync="query.pageSize"
        @pagination="changePagination" />
    </el-row>
  </div>
</template>
<script>
import { getModelList, getOperateLog } from '@/api/operation-log';
import timeUtils from '@/utils/timeHandle.js';

import Pagination from '@/components/Pagination';
export default {
  name: 'OperationLog',
  components: {
    Pagination
  },
  data() {
    return {
      tableData: [],
      listLoading: false,
      total: 0,
      searchDate: [
        timeUtils.timeHandle(
          new Date().getTime() - 3600 * 1000 * 24 * 6,
          'date'
        ),
        timeUtils.timeHandle(new Date().getTime(), 'date')
      ],
      modelOptions: [],
      query: {
        pageNum: 1,
        pageSize: 10,
        keywordName: 'operatorId',
        keyword: '',
        startTime: `${timeUtils.timeHandle(
          new Date().getTime() - 3600 * 1000 * 24 * 29,
          'date'
        )} 00:00:00`,
        endTime: `${timeUtils.timeHandle(new Date().getTime(), 'date')} 23:59:59`,
        model: 1,
        content: ''
      },
      // 时间选择限制
      pickerMinDate: '',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.pickerMinDate = minDate.getTime();
          if (maxDate) {
            this.pickerMinDate = '';
          }
        },
        disabledDate: time => {
          if (this.pickerMinDate !== '') {
            const day30 = (30 - 1) * 24 * 3600 * 1000;
            let maxTime = this.pickerMinDate + day30;
            if (maxTime > new Date()) {
              maxTime = new Date();
            }
            return time.getTime() > maxTime;
          }
          return time.getTime() > Date.now();
        }
      }
    };
  },
  created() {
    // 获取搜索下拉框
    getModelList()
      .then(result => {
        if (result.code == 200) {
          this.modelOptions = result.data;
          this.getData(this.query);
        } else {
          this.$message.error(result.msg);
        }
      })
      .catch(() => {});
  },
  methods: {
    getData() {
      this.listLoading = true;
      getOperateLog(this.query)
        .then(result => {
          if (result.code == 200) {
            this.listLoading = false;
            this.tableData = result.data.list.map(item => {
              item.createTime =
                item.createTime === undefined
                  ? ''
                  : item.createTime.split('T').join(' ');
              this.modelOptions.forEach(op => {
                if (op.index == item.model) {
                  item.model = op.name;
                }
              });
              return item;
            });

            this.total = Number(result.data.total);
          } else {
            this.listLoading = false;
            this.$message.error(result.msg);
          }
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    // 日期修改
    dateChange(date) {
      if (date === null) {
        this.query.startTime = '';
        this.query.endTime = '';
      } else {
        this.query.startTime = `${timeUtils.timeHandle(date[0], 'date')} 00:00:00`;
        this.query.endTime = `${timeUtils.timeHandle(date[1], 'date')} 23:59:59`;
      }
    },
    search() {
      this.query.pageNum = 1;
      this.getData(this.query);
    },
    // 切换分页
    changePagination() {
      this.getData(this.query);
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  padding: 20px;
  height: calc(100vh-50px);
  overflow-y: auto;
}
.text-align--right {
  text-align: right;
}
.width {
  &-180 {
    width: 180px;
  }
}
</style>
